<template>
  <div id="root">
    <Sel/>
    <el-divider/>
    <Tag></Tag>
    <Btn></Btn>
    <MyDialog></MyDialog>
    <!--    <el-container>
          <el-aside width="200px" style="border-right: #42b983">Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>-->
    <el-button ref="btn" type="primary" @click="showVnode">buttonCont</el-button>
    <div>
      <h1 ref="title" v-text="msg"></h1>
      <input v-model="checked" type="checkbox"/>
      <slot v-bind="{ checked }"></slot>
    </div>
    <HelloWorld ref="hell"></HelloWorld>
    <MyForm ref="myForm"></MyForm>
  </div>
</template>

<script>

// websocket 测试 |https://cloud.tencent.com/developer/article/1425545
// import Ws from "@/components/ws/ws";
import HelloWorld from "@/components/HelloWorld";
import MyForm from "@/components/eleui/form";
import MyDialog from "@/components/eleui/dialog";
import Btn from "@/components/eleui/btn/btn";
import Tag from "@/components/eleui/tag/tag";
import Sel from "@/components/eleui/sel/sel";

export default {
  name: "App",
  components: {HelloWorld, MyForm, MyDialog, Btn, Tag, Sel},
  data() {
    return {
      checked: false,
      msg: '学习'
    };
  }
  ,
  methods: {
    showVnode() {
      const h = this.$createElement;
      this.$notify({
        title: '标题名称',
        message: h('i', {style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
      });
      // this.$refs['title'].innerText = '改变' + new Date().getDate()
      this.$refs.title.innerText = new Date()
      console.log(this.$refs['myForm'])
    }
  },
}
;
</script>

<style>
/* 注释 */
</style>
